﻿@{
    Layout = "_Layout_UI";
}
@section scripts{
    <script type="text/javascript">
        var PicNo = '@ViewBag.PicGroup_No';
        var previewLength;
        var imgTempList;
        var bootstrap = function ($, ibpm) {
            "use strict";
            var page = {
                init: function () {
                    if (PicNo == '') {
                        alert('图片组编号丢失');
                        return;
                    }
                    imgTempList = [@Html.Raw(ViewBag.Picture)];
                    
                    page.bind();
                },
                bind: function () {
                    //图片分页展示
                    $('.img-list-slider').slick({
                        dots: true,
                        slidesToShow: 5,
                        slidesToScroll: 5
                    });
                    initEle();
                    //预览图片
                    $('.img-list-slider').on('click', '.thumbnail-self .image', function (e) {
                        imgEnlarge(e)
                    });
                },
            };
            page.init();
        }
        //dom初始化
        function initEle() {
            for (var i in imgTempList) {
                var str = "", imgTempListValue = imgTempList[i];
                str = '<div class="thumbnail-self">' +
                    '<img class="image" alt="' + imgTempListValue + '"  src="' + imgTempListValue + '" />' +
                    '<p class="remove" data-filename="' + imgTempListValue + '" >' + 'X' + '</p>' +
                    '</div>';

                $('.img-list-slider').slickAdd(str);
            }
        }
        //禁止自动轮播
        function carousel() {
            //禁止自动轮播
            $('.carousel').carousel({
                interval: false
            });
        }
        //图片预览放大
        function imgEnlarge(e) {
            carousel();
            //获取图片长度
            previewLength = $('.img-list-slider .thumbnail-self:not(.slick-cloned)').length;

            var sourceSrc = "", str = "", sourceSrcArr = [];
            //获取url数组
            $(".img-list-slider .thumbnail-self:not(.slick-cloned) img").each(function () {
                var attrSrc = $(this).attr("src");
                sourceSrcArr.push(attrSrc);
            });
            //获取当前点击的元素url
            sourceSrc = $(e.target).attr('src');

            //当前url在数组中位置
            var index = sourceSrcArr.indexOf(sourceSrc);
            if (index > -1) {
                for (var i in sourceSrcArr) {
                    if (i == index) {
                        str = '<div class="item active">' +
                            '<img src="' + sourceSrcArr[i] + '" class="img-self">' +
                            '</div>';
                    } else {
                        str = '<div class="item">' +
                            '<img src="' + sourceSrcArr[i] + '" class="img-self">' +
                            '</div>';
                    }
                    $(".carousel-inner-stand").append(str);
                }
            }
            $("#show_image").modal('show');
            //弹窗关闭清空数组
            var self = this;
            $('#show_image').on('hide.bs.modal', function () {
                $(".carousel-inner-stand").empty();
            });
        }
    </script>
}

<!--预览图片(弹框)  Modal-->
<div id="show_image" class="modal  modal-show-image" aria-hidden=”true” data-backdrop=”static”>
    <div class="modal-header">
        <button data-dismiss="modal" class="close close-pop" type="button"> X </button>
    </div>
    <div class="modal-body">
        <div id="myCarousel" class="carousel">
            <!--轮播（Carousel）项目-->
            <div class="carousel-inner carousel-inner-stand"></div>

            <!--轮播（Carousel）导航-->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="modal-footer img-modal">
        <button type="button" class="btn btn-default close close-pop" data-dismiss="modal"> 取 消 </button>
    </div>
</div>

<section id="features" class="left-bottom blue thumbnail-show">
    <div class="content">
        <div class="slider add-remove img-list-slider"></div>
    </div>
</section>
